<template>
  <!-- 报警时间分布 -->
  <div class="AIVIdeoAlarmTimeDistributestrly">
    <div class="page-item-title" style="height: fit-content">报警变化走势</div>
    <!-- 图表 -->
    <div class="echart-waper">
      <!-- 模拟量图表 -->
      <div id="timeBar"></div>
    </div>
  </div>
</template>
<script>
import { getAIAlartChangeChart } from "@/api/record";
let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/bar");
require("echarts/lib/component/tooltip");
export default {
  name: "AIVIdeoAlarmTimeDistribute",
  data() {
    return {
      echartsData: [],
      domStyle: {
        width: "874px",
        height: "379px"
      },
      dataXAxis: {},
      dataYAxis: {},
      showHotWords:this.bsConfig.showVideoHotWords!==false,
    };
  },
  created() {},
  mounted() {},
  methods: {
    //echarts-json数据
    getData(parames) {
      let that = this;
      that.echartsData = [];
      getAIAlartChangeChart({
        orgIds: parames.orgIds,
        startTime: parames.startTime,
        endTime: parames.endTime,
        alarmType: parames.alarmType
      }).then(res => {
        if (res.status == 200) {
          that.echartsData = res.data;
          that.getEchartsData();
        }
      });
    },
    //echart--init
    getEchartsData() {
      let that = this;
      that.$nextTick(() => {
        that.initEchart();
      });
    },
    // 初始化图标
    initEchart() {
      let that = this;
      let $dom = document.getElementById("timeBar");
      $dom.style.width = this.domStyle.width;
      if(this.showHotWords){
        $dom.style.height = this.domStyle.height;
      }else{
        $dom.style.height = '820px';
      }
      if ($dom) {
        that.dataXAxis = that.echartsData.map(item => {
            return item.time;
          });
          that.dataYAxis = that.echartsData.map(item => {
            return item.num;
          });
      }
      let option = {
        grid: {
          top: "80px",
          left: "4%",
          right: "1%",
          bottom: "4%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          formatter: "{b} " + "<br>" + "报警 {c}"
        },
        xAxis: {
          splitLine: {
            show: false
          },
          data: that.dataXAxis,
          axisLabel: {
            interval: 4, //代表显示所有x轴标签显示
            // rotate:45, //代表逆时针旋转45度
            fontSize: 14,
            inside: false,
            textStyle: {
              color: "rgba(255,255,255,0.5)"
            },
            formatter: function(value) {
              if (that.dataXAxis.length != 0) {
                return that.timestampToTime(value);
              } else {
                return value;
              }
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          z: 10,
          splitNumber: 3
        },
        yAxis: {
          offset: 22,
          splitNumber: 4,
          // max: 100,
          minInterval: 1,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            fontSize: 16,
            formatter: function(value) {
              return value;
            },
            textStyle: {
              color: "#fff"
            }
          }
        },
        series: [
          {
            barCategoryGap: "80%",
            showBackground: true,
            type: "bar",
            itemStyle: {
              color: new Echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.3, color: "rgba(47, 140, 254, 1)" },
                { offset: 1, color: "rgba(127, 192, 247, 0)" }
              ])
            },
            data: that.dataYAxis
          }
        ]
      };

      Echarts.init($dom).setOption(option);
    },
    // 时间转换格式
    timestampToTime(cjsj) {
      if (cjsj) {
        let montharr = [];
        montharr.push(cjsj.split("-"));
        let month_day = "";
        month_day = montharr[0][1] + "/" + montharr[0][2];
        return month_day;
      }
    }
  }
};
</script>

<style lang="scss" scope>
.AIVIdeoAlarmTimeDistributestrly {
  background-image: url(../../../../../assets/images/detailPage/AICloudVideo/xian.png)!important;
  .echart-waper {
    width: 100%;
    height: calc(100% - 20px);
  }
}
</style>